<template>
  <!-- 收费圈子未交费的查看页 -->
  <view class="main">
    <view class="top" v-if="!is_Scroll">
      <view class="fanHui" @tap="handleFan" v-if="!oneLevelId">
        <image src="../../imges/fanhuib.png" mode="aspectFill"></image>
      </view>
      <view class="shouye_" v-if="oneLevelId" @tap="handleFan">
        <view class="">
          <image src="../../imges/home.png" mode="aspectFill"></image>
          <text>首页</text>
        </view>
      </view>
      <view class="content">
        <view class="left">
          <image :src="orgDetail.orgUrl" mode="aspectFill"></image>
        </view>
        <view class="right">
          <view class="one">
            {{ orgDetail.orgName }}
          </view>
          <view class="two">
            {{ orgDetail.company }}
          </view>
        </view>
      </view>
      <view class="item">
        <view class="left">
          <view class="img">
            <image :src="orgDetail.avatarUrl" mode="aspectFill"></image>
          </view>
          <view class="name">
            <view class="">
              {{ orgDetail.applyName }}
            </view>
            <view class="bottom"> 圈主 </view>
          </view>
        </view>
        <view class="right">
          <view class="title">
            <view class="title1"> 优质帖子 </view>
            <view class="desc"> {{ orgDetail.postNumber }} 篇 </view>
          </view>
          <view class="xian_l"> </view>
          <view class="title">
            <view class="title1"> 加入圈子 </view>
            <view class="desc"> {{ orgDetail.peopleNumber }} 人 </view>
          </view>
        </view>
      </view>
    </view>
    <view class="top1" v-if="is_Scroll">
      <view class="one_" @tap="handleFan">
        <image src="../../imges/fanhuib.png" mode="aspectFill"></image>
      </view>
      <view class="two_">
        <image :src="orgDetail.orgUrl" mode="aspectFill"></image>
      </view>
      <view class="three_">
        <view class="title_">
          {{ orgDetail.orgName }}
        </view>
        <view class="desc_">
          <text>{{ orgDetail.company }}</text>
          <view class="xian_"> </view>
          <text>{{ orgDetail.applyName }}</text>
          <text class="quan_">圈主</text>
        </view>
      </view>
    </view>
    <!-- 圈子介绍 -->
    <view :class="[is_Scroll ? 'introduce introduce1' : 'introduce']">
      <view class="title">
        <text>圈子介绍</text>
        <view class="xian_bottom"> </view>
      </view>
      <view class="cont">
        {{ orgDetail.orgIntroduce }}
      </view>
    </view>
    <view class="perponList">
      <view class="title">
        <text>活跃成员</text>
        <view class="xian_bottom"> </view>
      </view>
      <view class="list">
        <view
          class="item"
          v-for="(item, index) in orgDetail.activeUserList"
          :key="index"
          @tap="handleTiShi"
        >
          <view class="top_">
            <view class="left_">
              <image :src="item.avatarUrl" mode="aspectFill"></image>
            </view>
            <view class="right_">
              <view class="one_">
                {{ item.realName }}
              </view>
              <view class="two_">
                {{ item.company }}
              </view>
              <!-- <view class="two_">
								董事会会员
							</view> -->
            </view>
          </view>
          <view class="bottom_">
            <view class="left_">
              <image src="../../imges/phone_.png" mode="aspectFill"></image>
              <view class="num">
                {{ item.telphone }}
              </view>
            </view>
            <view class="right_">
              <image src="../../imges/faxiaoxi.png" mode="aspectFill"></image>
            </view>
          </view>
        </view>
        <view class="wu_Huo" v-if="orgDetail.activeUserList.length == 0">
          <image src="../../imges/zanwuhuo.png" mode="aspectFill"></image>
          <text>暂无活跃成员</text>
        </view>
      </view>
    </view>

    <view class="footer_">
      <view class="btn_" @tap="handleQian" v-if="!isUserFriendsPay">
        <view class="top_1"> ￥{{ orgDetail.chargeAmount }} 加入圈子 </view>
        <view class="bottom_2">
          <text v-if="orgDetail.chargeType == 1">收费周期：一次性收费</text>
          <text v-if="orgDetail.chargeType == 2"
            >收费周期：{{ orgDetail.chargeCycle }}天</text
          >
        </view>
      </view>
      <!-- 
			<navigator :url="'/pages/index/detail?id=' + circleId" class="btn_" v-if="isUserFriendsPay">
				<view class="top_1">
					您已经是该圈成员
				</view>
				<view class="bottom_2">
					进去圈子
				</view>
			</navigator> -->
      <view class="btn_1" @tap="openShare"> 赚佣金 </view>
    </view>

    <!-- 分享按钮 -->
    <view class="share" v-if="isShare">
      <view class="top_">
        <view class="jiao_"></view>
        <view class="title_"> 分享方法： </view>
        <view class="body_"> 1.点击右上角 <text>...</text> </view>
        <view class="body_"> 2.分享到您的朋友圈或好友 </view>
      </view>
      <view class="center_">
        <image src="../../imges/fenxiang22.png" mode="aspectFill"></image>
        <view class="btn_" @tap="handleYongjin"> 查看我的佣金 </view>
      </view>
      <view class="bottom_" @tap="closeShare">
        <image src="../../imges/guanbi.png" mode="aspectFill"></image>
      </view>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
var jweixin = require("jweixin-module"); //配置
export default {
  data() {
    return {
      is_Scroll: false, //控制页面滚动
      circleId: "",
      orgDetail: {
        activeUserList: [],
      },
      isShare: false,
      shareCode: false, //判断是否分享进入
      isUserFriendsPay: false, //是否需要交费
      encryptUserId: "", //用户标识（自己）
      oneLevelId: "", //上级用户id
      secondLevelId: "", //二级用户id
    };
  },
  onLoad(options) {
    this.circleId = options.id;
    let token = uni.getStorageSync("token");
    if (options.encryptUserId) {
      this.oneLevelId = options.encryptUserId; //上级id
      if (options.oneLevelId) {
        this.secondLevelId = options.oneLevelId;
      }
      this.handleShareDetail();
      this.shareCode = true;
    } else {
      this.handleDetail();
      // this.handleShare();  //授权分享
    }
  },
  onShow() {
    this.isShare = false;
    this.handleShare(); //授权分享
    let token = uni.getStorageSync("token");
    if (token) {
      this.encryptUserId = uni.getStorageSync("personal").encryptUserId; //当前用户id
      this.handleDetail();
    }
  },
  methods: {
    //jdk配置
    configWeiXin() {
      let _this = this;
      //获取公众号配置
      request({
        //获取appid
        url: "wechat/portal/jsapiSignature/",
        method: "POST",
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": "1.3.3",
          "Source-Type": 7,
        },
        data: {
          url: window.location.href.split("#")[0], //后台通过域名进行授权
        },
      }).then((res) => {
        var jsApiList = [
          "onMenuShareAppMessage",
          "onMenuShareTimeline",
          "updateAppMessageShareData",
          "updateTimelineShareData",
        ];
        if (res.statusCode == 200) {
          //获取成功
          jweixin.config({
            debug: false, // 开启调试模式，发布的时候改为false
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名
            jsApiList: jsApiList, // 必填，需要使用的JS接口列表
          });
          jweixin.ready(function () {
            //配置成功
            _this.wxJsdkAuthorize(res.data.appId); //调用公众号-授权
          });
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
    //公众号授权
    wxJsdkAuthorize(_appid) {
      //授权时会跳到微信的页面，然后会自动调回来带着一个code
      let link = window.location.href;
      let _code = "";
      if (link.includes("code=")) {
        _code = link.split("code=")[1].split("&")[0];
      }

      // 如果拿到_code，传到后台
      if (_code) {
        console.log(_code, "打印code");
        request({
          url: "h5/loginapptoken/getOpenId", //拿oponid
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
          },
          data: {
            code: _code,
          },
        }).then((res) => {
          // console.log(res, '获取oponId')
          if (res.data.code == 200) {
            if (res.data.data.isLogin == false) {
              uni.navigateTo({
                url:
                  "/pages/index/verifyPhone?openId=" +
                  res.data.data.openId +
                  "&accessToken=" +
                  res.data.data.accessToken,
              });
            } else {
              uni.showToast({
                title: "登录成功",
                duration: 1500,
                icon: "none",
              });
              uni.setStorageSync("token", res.data.data.token); //缓存token'
              uni.setStorageSync("personal", res.data.data);
              this.encryptUserId = uni.getStorageSync("personal").encryptUserId; //拿本地用户id
              this.handleDetail();
            }
          } else {
            uni.showToast({
              title: "微信授权失效，请关闭重试",
              duration: 2000,
              icon: "none",
            });
          }
        });
      } else {
        let appid = _appid;
        let uri = encodeURIComponent(link);
        let authURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
        window.location.href = authURL;
      }
    },
    handleYongjin() {
      //查看佣金
      let token = uni.getStorageSync("token");
      if (this.shareCode && !token) {
        uni.showToast({
          title: "正在授权登录，请稍等",
          duration: 1000,
          icon: "none",
        });
        this.configWeiXin(); //掉授权
      } else {
        uni.navigateTo({
          url: "/pages/per_center/distrCommission",
        });
      }
    },
    handleQian() {
      //跳到支付页面
      let token = uni.getStorageSync("token");
      if (this.shareCode && !token) {
        uni.showToast({
          title: "正在授权登录，请稍等",
          duration: 1000,
          icon: "none",
        });
        this.configWeiXin(); //掉授权
      } else {
        if (!this.shareCode && !this.oneLevelId && !this.secondLevelId) {
          uni.navigateTo({
            url: "/pages/my_circle/setToll?id=" + this.circleId,
          });
        } else if (this.shareCode && this.oneLevelId && this.secondLevelId) {
          uni.navigateTo({
            url:
              "/pages/my_circle/setToll?id=" +
              this.circleId +
              "&oneLevelId=" +
              encodeURIComponent(this.oneLevelId) +
              "&secondLevelId=" +
              encodeURIComponent(this.secondLevelId),
          });
        } else {
          uni.navigateTo({
            url:
              "/pages/my_circle/setToll?id=" +
              this.circleId +
              "&oneLevelId=" +
              encodeURIComponent(this.oneLevelId),
          });
        }
      }
    },
    closeShare() {
      this.isShare = false;
    },
    openShare() {
      let token = uni.getStorageSync("token");
      if (this.shareCode && !token) {
        uni.showToast({
          title: "正在授权登录，请稍等",
          duration: 1000,
          icon: "none",
        });
        this.configWeiXin(); //掉授权
      } else {
        this.isShare = true;
      }
    },
    handleShare() {
      //分享功能
      let that = this;
      request({
        url: "wechat/portal/jsapiSignature/",
        method: "POST",
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": "1.3.3",
          "Source-Type": 7, //post一定要带这个header，被这里坑了半天
        },
        data: {
          url: window.location.href.split("#")[0],
        },
      }).then((res) => {
        if (res.statusCode == 200) {
          jweixin.config({
            debug: false,
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名，见附录1
            jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
          });

          jweixin.ready(function () {
            //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
            if (that.oneLevelId == "" && that.encryptUserId) {
              var urlLink =
                "https://h5test.yiqilaiwang.com/circle_h5/pages/index/noPayDetail?id=" +
                that.circleId +
                "&encryptUserId=" +
                encodeURIComponent(that.encryptUserId);
            } else if (that.oneLevelId != "" && that.encryptUserId) {
              var urlLink =
                "https://h5test.yiqilaiwang.com/circle_h5/pages/index/noPayDetail?id=" +
                that.circleId +
                "&encryptUserId=" +
                encodeURIComponent(that.encryptUserId) +
                "&oneLevelId=" +
                encodeURIComponent(that.oneLevelId);
            }
            jweixin.updateAppMessageShareData({
              title: that.orgDetail.orgName, //分享标题
              desc: that.orgDetail.orgIntroduce, // 分享描述
              link: urlLink, //分享链接
              imgUrl: that.orgDetail.orgUrl, //分享图标
              success: function () {
                // 用户确认分享后执行的回调函数
              },
              cancel: function () {
                // 用户取消分享后执行的回调函数
              },
            });
            //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
            jweixin.updateTimelineShareData({
              title: that.orgDetail.orgName, //分享标题
              desc: that.orgDetail.orgIntroduce, // 分享描述
              link: urlLink, //分享链接
              imgUrl: that.orgDetail.orgUrl, //分享图标
              success: function () {
                // 用户确认分享后执行的回调函数
              },
              cancel: function () {
                // 用户取消分享后执行的回调函数
              },
            });
          });
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
    handleShareDetail() {
      uni.showLoading({
        title: "加载中",
      });
      request({
        url: "h5/org/h5FriendsHomeInfo",
        method: "POST",
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": "1.3.3",
          "Source-Type": 7,
        },
        data: {
          orgId: this.circleId,
        },
      }).then((res) => {
        uni.hideLoading();
        if (res.data.code == 200) {
          this.orgDetail = res.data.data;
          this.handleShare(); //分享
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
          if (res.data.msg == "该圈子已注销" || res.data.msg == "圈子不存在") {
            setTimeout(() => {
              uni.reLaunch({
                url: "/pages/index/index",
              });
            }, 1000);
          }
        }
      });
    },
    handleDetail() {
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgCircle/friendsHomeInfo",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgId: this.circleId,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            this.orgDetail = res.data.data;
            this.handleShare(); //分享功能
            if (res.data.data.isUserFriendsPay == 0) {
              this.isUserFriendsPay = true;
              uni.reLaunch({
                url: "/pages/index/detail?id=" + this.circleId + "&type=1",
              });
            }
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，正重新授权",
              duration: 2000,
              icon: "none",
            });
            this.configWeiXin(); //授权
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
            if (
              res.data.msg == "该圈子已注销" ||
              res.data.msg == "圈子不存在"
            ) {
              setTimeout(() => {
                uni.reLaunch({
                  url: "/pages/index/index",
                });
              }, 1000);
            }
          }
        });
      }
    },
    handleFan() {
      // 点击返回事件
      if (this.oneLevelId) {
        uni.redirectTo({
          url: "/pages/index/index",
        });
      } else {
        uni.navigateBack({
          delta: 1,
        });
      }
    },
    handleTiShi() {
      if (this.isUserFriendsPay) {
        uni.reLaunch({
          url: "/pages/index/detail?id=" + this.circleId + "&type=1",
        });
      } else {
        uni.showToast({
          title: "请先加入圈子再查看",
          duration: 1500,
          icon: "none",
        });
      }
    },
  },
  onPageScroll(e) {
    //页面滚动事件
    // console.log(e)
    if (e.scrollTop >= 100) {
      this.is_Scroll = true;
    } else if (e.scrollTop <= 10) {
      this.is_Scroll = false;
    }
  },
};
</script>
<style lang="less" scoped>
.main {
  .wu_Huo {
    margin-top: 100rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      margin-top: -90rpx;
      width: 500rpx;
      height: 400rpx;
    }

    text {
      margin-top: -110rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(136, 136, 136, 1);
      line-height: 37px;
    }
  }

  .share {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #7f7f7f;
    z-index: 9999;

    .top_ {
      position: absolute;
      right: 74rpx;
      top: 64rpx;
      width: 316rpx;
      height: 132rpx;
      background: #ffffff;
      border-radius: 10rpx;
      padding: 18rpx;
      padding-right: 10rpx;
      box-sizing: border-box;

      .jiao_ {
        z-index: 99;
        height: 0;
        width: 0;
        border-bottom: 17rpx solid #fff;
        border-left: 12rpx solid transparent;
        border-right: 12rpx solid transparent;
        position: absolute;
        top: -17rpx;
        right: 30rpx;
      }

      .title_ {
        font-size: 22rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000;
      }

      .body_ {
        margin-top: 3rpx;
        font-size: 16rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;

        text {
          position: relative;
          top: -6rpx;
          margin-left: 12rpx;
          display: inline-block;
          width: 40rpx;
          height: 22rpx;
          background: #f0f0f0;
          border-radius: 4rpx;
          text-align: center;
          line-height: 22rpx;
          font-size: 25rpx;
          font-weight: 700;
          line-height: 10rpx;
        }
      }
    }

    .center_ {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 20%;
      width: 600rpx;
      height: 706rpx;

      image {
        width: 100%;
        height: 100%;
      }

      .btn_ {
        position: absolute;
        bottom: 32rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 496rpx;
        height: 74rpx;
        background: linear-gradient(135deg, #fce3ac 0%, #ffc56b 100%);
        border-radius: 46rpx;
        line-height: 74rpx;
        font-size: 26rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        text-shadow: 0px 4rpx 8rpx #dea853;
        text-align: center;
      }
    }

    .bottom_ {
      position: absolute;
      bottom: 12%;
      left: 50%;
      transform: translateX(-50%);
      width: 65rpx;
      height: 65rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .top1 {
    position: fixed;
    top: 0;
    z-index: 999;
    width: 750rpx;
    height: 176rpx;
    background: #176bd8;
    display: flex;
    padding: 71rpx 32rpx;
    box-sizing: border-box;
    padding-bottom: 0;

    .one_ {
      width: 35rpx;
      height: 35rpx;
      margin-top: 6rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .two_ {
      width: 62rpx;
      height: 62rpx;
      // margin-top: 20rpx;
      margin-left: 15rpx;
      margin-right: 22rpx;
      display: flex;
      align-items: center;

      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .three_ {
      margin-top: -6rpx;

      .title_ {
        font-size: 34rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }

      .desc_ {
        margin-top: 5rpx;
        display: flex;
        font-size: 22rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;

        text {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }

        .xian_ {
          width: 2rpx;
          position: relative;
          bottom: -10rpx;
          height: 14rpx;
          margin: 0 15rpx;
          background-color: #fff;
        }

        .quan_ {
          box-sizing: border-box;
          margin-top: 7rpx;
          margin-left: 15rpx;
          width: 54rpx;
          height: 22rpx;
          border-radius: 11rpx;
          border: 2rpx solid rgba(255, 255, 255, 0.46);
          line-height: 16rpx;
          text-align: center;
          font-size: 15rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
  }

  .top {
    background: #176bd8;
    width: 750rpx;
    height: 460rpx;
    padding: 40rpx 32rpx;
    box-sizing: border-box;

    .fanHui {
      width: 35rpx;
      height: 35rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .shouye_ {
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      view {
        display: flex;
        flex-direction: column;
        align-items: center;

        image {
          width: 40rpx;
          height: 40rpx;
          margin-bottom: 5rpx;
        }

        text {
          font-size: 18rpx;
          color: #fff;
          text-align: center;
        }
      }
    }

    .content {
      margin-top: 50rpx;
      display: flex;

      // align-items: center;
      .left {
        display: flex;
        align-items: center;
        width: 112rpx;
        height: 112rpx;

        image {
          border-radius: 50%;
          width: 100%;
          height: 100%;
        }
      }

      .right {
        margin-left: 20rpx;

        .one {
          margin-top: 6rpx;
          font-size: 34rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }

        .two {
          margin-top: 8rpx;
          font-size: 22rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }

    .item {
      margin-top: 40rpx;
      width: 686rpx;
      height: 134rpx;
      background: #ffffff;
      box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
      border-radius: 16rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 32rpx;
      box-sizing: border-box;

      .left {
        display: flex;
        align-items: center;

        .img {
          display: flex;
          align-items: center;
          width: 60rpx;
          height: 60rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .name {
          margin-left: 15rpx;
          font-size: 22rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;

          .bottom {
            width: 54rpx;
            height: 22rpx;
            background: linear-gradient(270deg, #ff6b4f 0%, #ffc54f 100%);
            border-radius: 11rpx;
            text-align: center;
            line-height: 22rpx;
            font-size: 15rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            margin-top: 5rpx;
          }
        }
      }

      .right {
        display: flex;

        .title {
          .title1 {
            font-size: 20rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #2168eb;
          }

          .desc {
            font-size: 29rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #2168eb;
          }
        }

        .xian_l {
          width: 2rpx;
          height: 60rpx;
          background-color: #eee;
          margin: 0 22rpx;
        }
      }
    }
  }

  .introduce1 {
    margin-top: 176rpx;
  }

  .introduce {
    box-sizing: border-box;
    padding: 40rpx 32rpx;
    width: 750rpx;

    .title {
      display: flex;
      flex-direction: column;
      text {
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }

      .xian_bottom {
        width: 57rpx;
        height: 6rpx;
        background: #2168eb;
        border-radius: 3rpx;
        margin-left: 37rpx;
      }
    }

    .cont {
      white-space: normal;
      word-break: break-all;
      word-warp: break-word;
      width: 686rpx;
      margin-top: 30rpx;
      font-size: 22rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 30rpx;
    }
  }

  .perponList {
    padding: 0 32rpx;
    width: 750rpx;
    box-sizing: border-box;

    .title {
      // width: 128rpx;
      display: flex;
      flex-direction: column;
      // align-items: center;

      text {
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }

      .xian_bottom {
        width: 57rpx;
        height: 6rpx;
        background: #2168eb;
        border-radius: 3rpx;
        margin-left: 37rpx;
        // margin: 0 auto;
      }
    }

    .list {
      // margin-bottom: 190rpx;
      padding-bottom: 220rpx;

      .item {
        margin-top: 25rpx;
        width: 686rpx;
        height: 251rpx;
        background: #ffffff;
        box-shadow: 0rpx 2rpx 20rpx 0px rgba(0, 0, 0, 0.08);
        border-radius: 12rpx;
        box-sizing: border-box;
        padding: 30rpx;

        .top_ {
          display: flex;

          .left_ {
            margin-top: 6rpx;
            width: 80rpx;
            height: 80rpx;

            image {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }

          .right_ {
            margin-left: 30rpx;

            .one_ {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              font-size: 32rpx;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #333333;
            }

            .two_ {
              margin-top: 16rpx;
              font-size: 24rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #888888;
            }
          }
        }

        .bottom_ {
          margin-top: 30rpx;
          padding: 20rpx 0;
          border-top: 2rpx solid #eee;
          display: flex;
          justify-content: space-between;

          .left_ {
            display: flex;
            align-items: center;

            image {
              width: 21rpx;
              height: 30rpx;
            }

            .num {
              margin-left: 15rpx;
              font-size: 24rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #888888;
            }
          }

          .right_ {
            width: 30rpx;
            height: 29rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }

  .footer_ {
    position: fixed;
    bottom: 0;
    width: 750rpx;
    height: 130rpx;
    background: #ffffff;
    box-shadow: 0px 1rpx 0px 0px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    padding: 15rpx 30rpx;
    border-top: 2rpx solid #eee;
    display: flex;

    .btn_ {
      width: 428rpx;
      height: 93rpx;
      background: linear-gradient(270deg, #2168eb 0%, #45a1f7 100%);
      border-radius: 46rpx;
      text-align: center;
      // line-height: 74rpx;
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .bottom_2 {
        margin-top: 5rpx;
        font-size: 22rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #c0d7f9;
      }
    }

    .btn_1 {
      width: 238rpx;
      height: 93rpx;
      background: #eb9921;
      border-radius: 50rpx;
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 93rpx;
      text-align: center;
      margin-left: 20rpx;
    }
  }
}
</style>
